<!-- 建筑产业工人服务平台 -->
<template>
	<!--  -->
	<view class="Worker-service" v-if="isShowPage">
		<view class="swiper">
			<swiper class="swiper" indicator-color="#D9D9D9" indicator-active-color="#B8212B"
				:indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"
				circular="true">
				<!-- <swiper-item v-for="(item,index) in imagesList" :key="index">
					<image class="backgroud-image" :src="item.image" mode="" />
				</swiper-item> -->
				<swiper-item>
					<image class="backgroud-image"
						src="https://amoserp.oss-cn-zhangjiakou.aliyuncs.com/www_jsjhj_cn/img/weixin.png" mode="" />
				</swiper-item>
			</swiper>
		</view>
		<view class="menu-bar latest-news">
			<!-- <view class="menu-bar-item" v-for="(item,index) in menuList" :key="index" @click="goPage(item)">
				<image class="menu-item-image" :src="item.image" mode="" />
				<view class="menu-item-name"><text>{{item.name}}</text></view>
			</view> -->
			<scroll-view scroll-x="true" class="scrollView" @scroll="scroll" @scrolltoupper="upper"
				@scrolltolower="lower" lower-threshold="50" enable-flex style="height: 200rpx;">
				<view class="menu-bar-item" v-for="(item,index) in menuList" :key="index" @click="goPage(item)">
					<image class="menu-item-image" :src="item.image" mode="" />
					<view class="menu-item-name"><text>{{item.name}}</text></view>
				</view>
			</scroll-view>
		</view>
		<view class="latest-news">
			<view class="latest-news-title"><text style="font-weight: 600;font-size: 32rpx;">劳务招标</text><text
					style="color: #007AFF;" @click="bindingL">更多</text></view>
			<scroll-view scroll-x="true" class="scrollView" @scroll="scroll" @scrolltoupper="upper"
				@scrolltolower="lower" lower-threshold="50" enable-flex style="height: 200rpx;">
				<view class="last_top" @click="goDetailPage(item)" v-for="(item,index) in zb" :key="index"
					:id="s+index">
					<view class="latest-news-body">
						<text class="tet">{{item.bidding_type}}</text>
						<text style="line-height: 50rpx;">{{item.bidding_name}}</text>
					</view>
					<view class="latest-news-date"
						style="display: flex;justify-content: space-between;color: rgba(0,0,0,.6);">
						<text style="width: 60%;
								overflow: hidden;
								display: inline-block;
								text-overflow: ellipsis;
								white-space: nowrap;">{{item.company_id_name}} </text>
						<text style="margin-right: 10rpx;display: inline-block;">{{item.create_date}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="latest-news">
			<view class="latest-news-title"><text style="font-weight: 600;font-size: 32rpx;">劳务课堂</text><text
					style="color: #007AFF;" @click="teaclass">更多</text></view>
			<scroll-view scroll-x="true" class="scrollView" @scroll="scroll" @scrolltoupper="upper"
				@scrolltolower="lower" lower-threshold="50" enable-flex>
				<view class="latest-news-center" style="display: flex;justify-content: space-around;"
					@click="lwdetails(item.id)" v-for="(item,index) in flv" :key="index">
					<view class="latest-news-flv">
						<image :src="item.url_images | img " mode=""></image>
					</view>
					<view class="" style="padding: 0 10rpx;">
						<view class=""
							style="margin-left: 11px;color: #808080;padding-bottom: 10rpx;max-width: 310rpx;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
							{{item.name}}
						</view>
						<view style="margin-left: 11px;color: #808080;padding-bottom: 10rpx;">
							{{item.categ_id_name}}
						</view>
						<view class="" style="margin-left: 11px;color: #808080;">
							{{item.create_date | date}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="latest-news">
			<view class="latest-news-title"><text style="font-weight: 600;font-size: 32rpx;">行业快讯</text><text
					style="color: #007AFF;" @click="TradeAlerts">更多</text></view>
			<scroll-view scroll-x="true" class="scrollView" @scroll="scroll" @scrolltoupper="upper"
				@scrolltolower="lower" lower-threshold="50" enable-flex>
				<view class="latest-news-box" @click="details(item)" v-for="(item,index) in list" :key="index">
					<view class="latest-news-image" style="margin-right: 30rpx;">
						<image :src="item.images" mode=""></image>
					</view>
					<view class="latest-news-tearst">
						<view class="">
							{{item.name}}
						</view>
						<view style="color: #808080;">
							<text></text>
							<text style="line-height: 40rpx;text-indent: 2em;">{{item.navicontenttf}}</text>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="latest-news">
			<view class="latest-news-title"><text style="font-weight: 600;font-size: 32rpx;">行业分析</text><text
					style="color: #007AFF;" @click="industryAnalysis">更多</text></view>
			<scroll-view scroll-x="true" class="scrollView" @scroll="scroll" @scrolltoupper="upper"
				@scrolltolower="lower" lower-threshold="50" enable-flex>
				<view class="latest-news-box" @click="fxdetails(item)" v-for="(item,index) in strs" :key="index">
					<view class="latest-news-tearst">
						<view class="">
							{{item.name}}
						</view>
						<view style="color: #808080;">
							<text></text>
							<text style="line-height: 40rpx;text-indent: 2em;">{{item.navicontenttf}}</text>
						</view>
					</view>
					<view class="latest-news-image" style="margin-left: 16px;">
						<image :src="item.images" mode=""></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/js/api.js'

	import youScroll from '@/components/uni-list-scroll/you-scroll'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		login
	} from '@/static/js/auth.js'

	import {
		share
	} from '@/mixins/index.js'
	import request from '@/static/js/request.js'
	var self;
	export default {
		mixins: [share],
		props: {
			title: {
				type: Object
			}
		},
		filters: {
			img: function(value) {
				if (value) {
					let url = value
					return "https://jsjhj.net" + url
				}
			},
			date: function(v) {
				if (v) {
					let index = 0;
					let key = " ";
					while ((index = v.indexOf(key, index)) != -1) {
						return v.slice(0, 11)
					}
				}
			},
			nametitle: function(ev) {
				if (ev) {
					let index = 0; //开始查询的位置
					let key = "施"; //需要查询的字符串
					while ((index = ev.indexOf(key, index)) != -1) { //从角标index开始向后查询,如果角标是-1，则表示查询结束
						return ev.slice(index, index + 8)
					}
				}
			}
		},
		components: {
			youScroll
		},
		data() {
			return {
				current: 0,
				scrollLeft: 0,
				old: {
					scrollLeft: 0
				},
				imagesList: [{
					image: "../../static/image/top_backgroud.png",
				}, {
					image: "../../static/image/top_backgroud.png",
				}, {
					image: "../../static/image/top_backgroud.png",
				}, {
					image: "../../static/image/top_backgroud.png",
				}],
				indicatorDots: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				menuList: [{
						image: "../../static/image/main/select.png",
						name: "用工查询",
						router: '/pages/home/work/recruitUse'
					}, {
						image: "../../static/image/main/bidding.png",
						name: "招标公告",
						router: '/pages/home/bidding/BiddingPage'
					},
					{
						image: "../../static/image/main/recruitment.png",
						name: "中标公告",
						router: '/pages/home/job/JobIndex'
					},
					{
						image: "../../static/image/main/classroom.png",
						name: "学习课堂",
						router: '/pages/home/class/ClassPage'
					},
					{
						image: "../../static/image/main/companyi.png",
						name: "招工信息",
						router: "/pages/home/Recruitment/RecruitmentInformation"
					},
					{
						image: "../../static/image/main/data.png",
						name: "找活信息",
						router: "/pages/home/Finding/FindingInformation"
					},
				],
				list: [],
				strs: [],
				flv: [],
				zb: [],
				isShowPage: false
			}
		},
		onShow() {
			api.pageApi("cms.news", 5, 5, "").then(res => {
				this.list = res.data
			})
			api.pageApi("cms.news", 3, 5, "").then(res => {
				this.strs = res.data
			})
			self = this;
			api.postFunction2('jhj.bidding.unusual', '_api_public_page', {
				page: 1,
				limit: 5,
				domain: `[('bidding_state', '=', '招标中')]`,
				search: ""
			}).then(res => {
				this.zb = res.data.filter(item => {
					return item.type != '中标'
				});
			}).catch(err => {
				console.log(err);
			})
			// 课堂
			api.postPubileApi('cms.news', '_api_public_teach_page', {
				page: 1,
				limit: 5,
				domain: `[('categ_id','in',[7,8,9])]`,
				order: "",
				search: ""
			}).then(res => {
				this.flv = res.data;
			})
		},
		watch: {
			flv: function(newval, oldval) {
				if (newval = "") {
					this.isShowPage = false
				} else {
					this.isShowPage = true
				}
			}
		},
		methods: {
			goDetailPage(value) {
				// console.log(value)
				uni.navigateTo({
					url: `/pages/home/bidding/BiddingDetailPage?id=${value.id}&type=${value.type}`
				})
			},
			details(val) {
				let value = JSON.stringify(val)
				var id = val.id;
				uni.navigateTo({
					url: `/pages/home/trade/components/treadetails?id=${id}`
				})
			},
			fxdetails(val) {
				let value = JSON.stringify(val)
				var id = val.id;
				uni.navigateTo({
					url: `/pages/home/industry/components/industryDetails?id=${id}`
				})
			},
			lwdetails(id) {
				var str = this.getdate()
				uni.setStorageSync('str', str)
				//明天的时间
				var day3 = new Date();
				day3.setTime(day3.getTime() + 24 * 60 * 60 * 1000);
				var s3 = day3.getFullYear() + "-" + (day3.getMonth() + 1) + "-" + day3.getDate();

				if (uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: `/pages/home/class/ClassDetailPage?id=${id}`
					})
				} else {
					var str1 = this.getdate()
					if (str1 == str) {
						if (uni.getStorageSync('id')) {
							if (id == uni.getStorageSync('id')) {
								uni.navigateTo({
									url: `/pages/home/class/ClassDetailPage?id=${id}`
								})
							} else {
								uni.showToast({
									title: '未登录每日只可查看一个视频！',
									icon: 'none',
									duration: 2000
								});
							}
						} else {
							uni.setStorageSync('id', id)
							uni.navigateTo({
								url: `/pages/home/class/ClassDetailPage?id=${id}`
							})
						}
					} else {
						uni.setStorageSync('id', id)
						var str = this.getdate()
						uni.setStorageSync('str', str)
						uni.navigateTo({
							url: `/pages/home/class/ClassDetailPage?id=${id}`
						})
					}
				}


			},
			getdate() {
				var date = new Date(),
					year = date.getFullYear(),
					month = date.getMonth() + 1,
					day = date.getDate();
				var str1 = year + '-' + month + '-' + day;
				return str1
			},
			// 点击跳转招标公告
			bindingL() {
				uni.navigateTo({
					url: '/pages/home/bidding/BiddingPage'
				})
			},
			// 点击跳转行业快讯
			TradeAlerts() {
				uni.navigateTo({
					url: `/pages/home/trade/TradeList`
				})
			},
			// 点击跳转行业分析
			industryAnalysis() {
				uni.navigateTo({
					url: `/pages/home/industry/industryList`
				})
			},
			// 点击跳转劳务课堂
			teaclass() {
				uni.navigateTo({
					url: '/pages/home/class/ClassPage'
				})
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollLeft = e.detail.scrollLeft
			},
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			goPage(item) {
				if (uni.getStorageSync('userInfo') == '' && (item.name == '招工信息' || item.name == '找活信息' || item.name == '用工查询')) {
					uni.switchTab({
						url: "/pages/main/mine"
					})
				} else {
					uni.navigateTo({
						url: item.router
					})
				}
			},
			cancel() {
				this.$refs.popup.close()
			},
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			onPullDown(done) { // 下拉刷新
				setTimeout(() => {
					done(); // 完成刷新
				}, 1000 * 1)
			},
			onScroll(e) { // 监听滚动
				// console.log(e.detail.scrollTop)
			},
			onLoadMore(e) { // 加载更多

			},
			scrollTo() {

			},
		}
	}
</script>
<style lang="less" scoped>
	.Worker-service {
		background: #F4F5F9;
		height: 100%;
		padding-bottom: 3vh;

		.swiper {
			width: 100%;
			height: 306rpx;

			.backgroud-image {
				width: 100%;
				height: 100%;
				background-size: 100% 100%;
			}
		}

		.menu-bar {
			background: #FFFFFF;
			display: flex;
			text-align: center;
			align-items: center;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 40rpx 22rpx 12rpx 22rpx;
			// margin-bottom: 20rpx;

			.menu-bar-item {
				flex: 0 0 20%;
				margin-bottom: 22rpx;

				.menu-item-image {
					width: 100rpx;
					height: 100rpx;
				}

				.menu-item-name {
					font-size: 24rpx;
					font-weight: 400;
					color: #333333;
					line-height: 34rpx;
					margin-top: 18rpx;
				}
			}
		}

		.latest-news {
			background: #FFFFFF;
			margin-bottom: 20rpx;

			.latest-news-title {
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				line-height: 50rpx;
				padding: 30rpx 32rpx;
				display: flex;
				justify-content: space-between;
			}

			.scrollView {
				height: 240rpx;
				overflow: hidden;
				flex-wrap: nowrap;
				display: flex;

				.last_top {
					width: calc(100% - 32rpx);

					.latest-news-body {
						width: 100vw;
						padding: 0rpx 32rpx;
						font-size: 28rpx;

						.tet {
							background-color: #007AFF;
							color: #ffff;
							padding: 4rpx 10rpx;
							border-radius: 10rpx;
							margin-right: 20rpx;
						}

					}

					.latest-news-date {
						width: 100vw;
						font-size: 26rpx;
						padding: 40rpx 32rpx;
						text-align: right;
					}
				}


				.latest-news-center {
					padding: 10rpx 32rpx;
					font-size: 28rpx;

					.latest-news-flv {
						width: 30vw;
						height: 150rpx;
						background-color: #DCDFE6;
						border-radius: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}

				.latest-news-box {
					width: 100%;
					padding: 10rpx 32rpx;
					display: flex;
					background-color: #FFFFFF;

					.latest-news-image {
						width: 30vw;
						height: 180rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}


					.latest-news-tearst {
						width: 60vw;
						height: 180rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}

					.latest-news-tearst :nth-child(1) {
						font-size: 30rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.latest-news-tearst :nth-child(2) {
						font-size: 26rpx;
						color: #808080;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
					}
				}
			}


		}

		.content {
			padding: 2rpx 32rpx 0rpx 32rpx;
			height: calc(100% - 950rpx);
			background: #FFFFFF;

			.latest-new-item:last-child {
				margin-bottom: 0rpx;

			}

			.latest-new-item {
				margin-bottom: 60rpx;
				display: flex;
				align-items: center;

				.new-item-image {
					width: 206rpx;
					height: 204rpx;
				}

				.new-content {
					flex: 1;
					margin-left: 16rpx;

					.new-word {
						font-size: 30rpx;
						font-weight: 400;
						color: #333333;
						line-height: 42rpx;
						word-break: break-all;
						text-overflow: ellipsis;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						margin-bottom: 84rpx;
						text-indent: 2em;
						line-height: 40rpx;
					}

					.new-remarks {
						display: flex;
						text-align: center;
						align-items: center;
						font-size: 26rpx;
						font-weight: 400;
						color: #666666;
						line-height: 36rpx;

						.new-time {
							flex: 1;
							text-align: left;
						}

						.new-eye {
							width: 24rpx;
							height: 18rpx;
							margin-right: 14rpx;
						}

						.new-value {}
					}
				}
			}
		}

		.suspension {
			position: fixed;
			bottom: 230rpx;
			right: 30rpx;

			.suspension-image {
				width: 122rpx;
				height: 122rpx;
			}

			.suspension-content {
				font-size: 20rpx;
				font-weight: 400;
				color: #FFFFFF;
				position: fixed;
				bottom: 265rpx;
				right: 38rpx;

			}
		}
	}

	.authorize {

		background: #FFFFFF;
		border-radius: 8rpx;
		padding: 40rpx 26rpx 44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.auth-icon {
			width: 66rpx;
			height: 76rpx;
			margin-bottom: 12rpx;
		}

		.auth-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}

		.auth-content {
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
		}

		.button-group {
			display: flex;
			align-items: center;
			margin-top: 38rpx;
			width: 400rpx;
		}

		.line {

			height: 2rpx;
			background: #EEEEEE;
			width: 100%;
			margin: 22rpx 0;
		}

		.auth-btn {

			flex: 1;
			height: 68rpx;
			background: #B8212B;
			border-radius: 2rpx;
			border: 2rpx solid #B8212B;
			line-height: 68rpx;
			font-size: 28rpx;

			font-weight: 400;
			color: #FFFFFF;
		}

		.cancel-btn {

			flex: 1;
			height: 68rpx;
			color: #B8212B;
			border-radius: 2rpx;
			border: 2rpx solid #B8212B;
			line-height: 68rpx;
			font-size: 28rpx;
			margin-right: 20rpx;

			font-weight: 400;

		}
	}
</style>
